<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
  <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
  <script src="http://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/locale/zh-cn.js"></script>
  <script src="./assets/lib/axios.min.js"></script>
  <script src="./assets/js/axios.js"></script>
  <script src="./assets/lib/cookie.js"></script>
  <link rel="stylesheet" href="./assets/css/florder.css">
  <title>Document</title>
</head>

<body>
  <div class="wrap" id="wrap">
    <div class="forder" v-if="HotelInfo">
      <div class="left">
        <div class="hotelinfo">
          <div class="img">
            <img :src="HotelInfo.Detail.ThumbNailUrl" alt="">
          </div>
          <div class="hotel">
            <div class="title">
              <p>
                {{HotelInfo.Detail.HotelName}}
              </p>
            </div>
            <div class="address nor">
              {{HotelInfo.Detail.Address}}
            </div>
            <div class="room">
              {{HotelInfo.Rooms[0].Name}}
            </div>
          </div>
          <div class="hoteldetails">
            <div class="details-item">
              <span class="details-tip nor">床型:</span>
              <span>{{HotelInfo.Rooms[0].BedType}}</span>
            </div>
            <div class="details-item">
              <span class="details-tip nor">面积:</span>
              <span>{{HotelInfo.Rooms[0].Area}}平米</span>
            </div>
            <div class="details-item">
              <span class="details-tip nor">宽带:</span>
              <span>{{netStatus('0')}}</span>
            </div>

            <div class="details-item">
              <span class="details-tip nor">楼层:</span>
              <span>{{HotelInfo.Rooms[0].Floor}} 楼</span>
            </div>
            <div class="details-item">
              <span class="details-tip nor">可住:</span>
              <span>{{HotelInfo.Rooms[0].Capcity}}人</span>
            </div>

          </div>
        </div>
      </div>
      <div class="right">
        <div class="order-form">
          <div class="order-item">
            <p class="title">预定信息</p>
            <div class="cc">
              <div class="form-item">
                <div class="tip">
                  入离日期：
                </div>
                <div class="cont">
                  {{formatTime(searchparams.ArrivalDate) }} 到 {{ formatTime(searchparams.DepartureDate) }} 共{{totalNight}} 修改日期
                </div>
              </div>
              <div class="form-item">
                <div class="tip">
                  房间数量
                </div>
                <div class="cont">
                  <p>
                    <input-number v-model="roomNum" @on-change="roomNumchange" :editable="false" :max="10" :min="1"></input-number>间
                  </p>
                  <p v-if="noticeshow">
                    <Icon type="alert-circled" style="color:red"></Icon> 如果需要预定10间以上的房间请与客服联系</p>
                </div>
              </div>
              <div class="form-item">
                <div class="tip">
                  房费总计
                </div>
                <div class="cont">
                  <div class="price">
                    <em>￥</em>
                    {{totalRatePrice}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="order-item">
            <p class="title">入住信息</p>
            <div class="cc">
              <div class="form-item" v-for="(item,index) in nameList">
                <div class="tip">
                  房间{{index+1}}*
                </div>
                <div class="cont">
                  <i-input v-model="item.name" placeholder="Enter something..." style="width: 300px"></i-input>
                </div>
              </div>
              <div class="form-item">
                <div class="tip">
                  联系电话:
                </div>
                <div class="cont">
                  <i-input v-model="phonenum" placeholder="Enter something..." style="width: 300px"></i-input>
                </div>
              </div>
              <div class="form-item">
                <div class="tip">
                  最晚到店时间:
                </div>
                <i-select @on-change="timechange" v-model="arrivelHoteltime" style="width:200px">
                  <i-option v-for="item in timList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
              </div>
            </div>
          </div>
        </div>
        <div class="order-tip">
          <ul>
            <li style="list-style: none;">预定须知</li>

            <li>
              {{formatPrepayRules(HotelInfo.Rooms[0].RatePlans[0].PrepayRuleIds).content}}
            </li>
          </ul>
          <div class="bottme">
            <span>在线支付￥{{totalRatePrice}}</span>
            <i-button type="error" @click="toorder">立即预定</i-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  var self = null;
  var app = new Vue({
    el: '#wrap',
    data() {
      return {
        timList: [
          {
            value: moment(this.GetQueryString('ArrivalDate') + ' 18:00:00').format("YYYY-MM-DD HH:mm:ss"),
            label: '18:00之前'
          },
          {
            value: moment(this.GetQueryString('ArrivalDate') + ' 20:00:00').format("YYYY-MM-DD HH:mm:ss"),
            label: '20:00之前'
          },
          {
            value: moment(this.GetQueryString('ArrivalDate') + ' 23:59:00').format("YYYY-MM-DD HH:mm:ss"),
            label: '23:59之前'
          },
          {
            value: moment(this.GetQueryString('ArrivalDate') + ' 06:00:00').add(1, 'days').format("YYYY-MM-DD HH:mm:ss"),
            label: '次日06:00之前'
          },
        ],
        lastestarriveltime: moment(this.GetQueryString('ArrivalDate') + ' 15:00:00').format("YYYY-MM-DD HH:mm:ss"),
        arrivelHoteltime: moment(this.GetQueryString('ArrivalDate') + ' 18:00:00').format("YYYY-MM-DD HH:mm:ss"),//最晚到店时间
        HotelInfo: null,
        noticeshow: false,
        roomNum: 1,
        phonenum: '',
        nameList: [{ name: '王' }],
        searchparams: {
          ArrivalDate: this.GetQueryString('ArrivalDate'),
          DepartureDate: this.GetQueryString('DepartureDate'),
          HotelIds: this.GetQueryString('HotelIds'),
          Options: "1,2,4",
          RatePlanId: this.GetQueryString('RatePlanId'),
          RoomTypeId: this.GetQueryString('RoomTypeId'),
        },
        usersecret: {
          userid: Cookie.get('USERIDGDLY'),
          sercet: Cookie.get('usersecret'),
          userphone: Cookie.get('gdmobileuserphone'),
          where: Cookie.get('WHERE')
        },
      }
    },
    created() {
      self = this;
      console.log('searchparams', this.searchparams);
      axios.all([this.getOnlineHotelDetails(this.searchparams)]).then(axios.spread(function (onLineHotel, HDataBooking) {
        console.log('onLineHotel', onLineHotel);
        if (onLineHotel.data.Result.Count) {
          self.HotelInfo = onLineHotel.data.Result.Hotels[0];
        }
      }))
    },
    computed: {
      OrderRooms() {
        var a = [];
        for (var i = 0; i < this.nameList.length; i++) {
          a.push({ Customers: [{ name: this.nameList[i].name }] })
        }
        return a;
      },
      tokenparams() {
        return "?token=" + self.usersecret.userid + "|" + self.usersecret.sercet + "|" + self.usersecret.userphone + "|" + self.usersecret.where
      },
      totalRatePrice() {
        var b_n = this.HotelInfo.Rooms[0].RatePlans[0].TotalRate * 100;
        return Math.floor(parseFloat(b_n * this.roomNum)) / 100;
      },
      totalNight() {
        var a = moment(this.searchparams.DepartureDate);
        var b = moment(this.searchparams.ArrivalDate);
        var ddd = b.to(a, true)
        return ddd.replace('天', '晚');
      }
    },
    methods: {
      GetValidate(para) { //验证数据正确性
        return axios.post('/api/eLongHotels/HotelData/GetHDataValidate', para)
      },
      getIp() { //获得IP
        return axios.get(
          "http://m.czgdly.com/transportation/airplane/Beecloud/getCurrentIp.asp"
        );
      },
      timechange(v) {
        if (v == moment(this.GetQueryString('ArrivalDate') + ' 06:00:00').add(1, 'days').format("YYYY-MM-DD HH:mm:ss")) {
          this.lastestarriveltime = moment(this.GetQueryString('ArrivalDate') + ' 23:59:00').format("YYYY-MM-DD HH:mm:ss");
        } else if (v == moment(this.GetQueryString('ArrivalDate') + ' 23:59:00').format("YYYY-MM-DD HH:mm:ss")) {
          this.lastestarriveltime = moment(this.GetQueryString('ArrivalDate') + ' 21:00:00').format("YYYY-MM-DD HH:mm:ss");
        } else {
          this.lastestarriveltime = moment(v).subtract(3, 'hours').format("YYYY-MM-DD HH:mm:ss");
        }
      },
      toorder() {
        this.$Spin.show({
          render: (h) => {
            return h('div', [
              h('Icon', {
                'class': 'spin-icon-load',

                props: {
                  type: 'load-c',
                  size: 18
                }
              }),
              h('div', '预定中...请稍后...')
            ])
          }
        });
        //验证数据有效性能；
        console.log('timList', this.arrivelHoteltime);
        console.log('timList', this.lastestarriveltime);
        this.searchparams.EarliestArrivalTime = this.arrivelHoteltime;
        this.searchparams.LatestArrivalTime = this.lastestarriveltime;
        this.searchparams.HotelId = this.searchparams.HotelIds;
        this.searchparams.TotalPrice = this.totalRatePrice;
        this.searchparams.NumberOfRooms = this.roomNum;
        console.log('数据验证', this.searchparams)
        // this.searchparams.
        axios.all([this.getIp(), this.GetValidate(this.searchparams)]).then(axios.spread(function (ipData, Validate) {
          console.log('验证的结果', Validate.data.Result.ResultCode);
          console.log('IP', ipData.data);
          if (Validate.data.Result.ResultCode == 'OK') {
            //继续预定
            self.searchparams.NumberOfCustomers = self.searchparams.NumberOfRooms;
            self.searchparams.CurrencyCode = 'RMB';
            self.searchparams.CustomerIPAddress = ipData.data;//IP;
            self.searchparams.ConfirmationType = 'SMS_cn';
            self.searchparams.OrderRooms = self.OrderRooms;
            self.searchparams.Contact = {
              Name: self.nameList[0].name,
              Mobile: self.phonenum,
              Gender: 'Unknown'
            };
            axios
              .post(
                "/api/eLongHotels/HotelOrder/GetHOrderCreate" + self.tokenparams,self.searchparams).then(function (orderdetails) {
                  console.log('下订单返回值',orderdetails.data.code);
                  if(orderdetails.data.code=='0'){
                    //预定成功去支付
                    // this.$Spin.hide();
                    window.location.href='pay.html?AffiliateConfirmationId='+orderdetails.data.data.AffiliateConfirmationId
                  }else{
                    //预定失败
                    self.$Modal.error({
                            title: '提示',
                            content: '预定失败请稍后重试'
                        });
                  }
                })
          } else {
            //出错
            self.$Spin.hide();
            self.$Modal.error({
                            title: '提示',
                            content: '预定失败请稍后重试'
                        });
            // self.$Message.error({ content: Validate.data.ErrorMessage, duration: 5 });
          }
        }))
        // axios.post('/api/eLongHotels/HotelData/GetHDataValidate', this.searchparams).then(function (Validate) {


        // });
      },
      formatPrepayRules(PrepayRuleIds) {
        var currentRules_obj = null;
        var cancel_obj = {};
        var firstrul = "";
        var secrul = "";
        console.log('this.PrepayRules.length', this.HotelInfo);
        if (this.HotelInfo.PrepayRules.length > 0) {
          currentRules_obj = this.HotelInfo.PrepayRules.filter(function (item) {
            return item.PrepayRuleId == PrepayRuleIds
          });
          console.log('currentRules_obj', currentRules_obj);
          if (currentRules_obj.length > 0) {
            if (currentRules_obj[0].ChangeRule == 'PrepayNoChange') {
              cancel_obj = {
                name: '不可取消',
                content: '订单一经预订成功，不可变更/取消，如未入住将扣除全额房费。'
              }
              // return '不可取消'
            } else if (currentRules_obj[0].ChangeRule == 'PrepayNeedSomeDay') {
              var firsttime = moment(this.ArrivalDate).subtract(currentRules_obj[0].Hour, 'hours').format(
                'YYYY-MM-DD HH:MM');
              var secondtime = moment(this.ArrivalDate).subtract(currentRules_obj[0].Hour2, 'hours').format(
                'YYYY-MM-DD HH:MM');
              console.log('第一阶段', firsttime);
              console.log('第二阶段', secondtime);
              console.log('===================================');
              if (moment().isBefore(firsttime)) {
                if (currentRules_obj[0].DeductFeesBefore) {
                  firstrul = '在' + firsttime + '扣款' + currentRules_obj[0].DeductNumBefore;
                } else {
                  firstrul = '在' + firsttime + '免费取消';
                }
              }

              if (currentRules_obj[0].DeductFeesAfter) {
                if (currentRules_obj[0].CashScaleFirstAfter == 'Money') {
                  firstrul += '在' + secondtime + '之前取消扣款￥' + currentRules_obj[0].DeductNumAfter;

                } else if (currentRules_obj[0].CashScaleFirstAfter == 'Percent') {
                  if (currentRules_obj[0].DeductNumAfter == 100) {
                    firstrul += '在' + secondtime + '之前取消扣除全额房费';
                  } else {
                    firstrul += '在' + secondtime + '之前取消扣除全额房费的' + currentRules_obj[0].DeductNumAfter + '%';

                  }

                } else if (currentRules_obj[0].CashScaleFirstAfter == 'FristNight') {
                  firstrul += '在' + secondtime + '之前取消扣首晚房费';

                }
              } else {
                firstrul += '在' + secondtime + '之前取消' + '不扣款';
              }

              console.log(firstrul);
              console.log('===================================');
              cancel_obj = {
                name: '限时取消',
                content: firstrul
              }
              // return '限时取消'
            } else if (currentRules_obj[0].ChangeRule == 'PrepayNeedOneTime') {
              var freecanceltime = moment(currentRules_obj[0].DateNum + ' ' + currentRules_obj[0].Time).format(
                'YYYY-MM-DD HH:mm');
              console.log('在之' + freecanceltime + '前免费取消')
              firstrul = '在之' + freecanceltime + '前免费取消';
              cancel_obj = {
                name: '限时免费取消',
                content: firstrul
              }
              // return '限时免费取消'
            }

          }
          return cancel_obj;
        }
      },
      formatTime(tt) {
        return moment(tt).format('YYYY-MM-DD (dddd)')
      },
      netStatus(st) {
        // 0-无
        // 1-免费宽带
        // 2-收费宽带
        // 3-免费WIFI
        // 4-收费WIFI
        /*
         *1.酒店对应的图片轮播展示 替换移动端的340px的图片转换成740px的尺寸
         *2.酒店的产品展示功能
         *
         *3 酒店的取消规则计算
         *
         *4 对于动态改变的预定酒店的时间
         *5 酒店的订单管理*/
        switch (st) {
          case '0':
            return '无'
            break;
          case '1':
            return '免费宽带'
            break;
          case '2':
            return '收费宽带'
            break;
          case '3':
            return '免费WIFI'
            break;
          case '4':
            return '收费WIFI'
            break;
        }
      },

      getOnlineHotelDetails: function getOLHDetails(sp) {
        return axios.post("/api/eLongHotels/HotelInfo/GetHDetail", sp);
      },
      getLocalHotelDetails: function getLcHDetails(sp) {
        return axios.get(
          "/api/eLongHotels/HotelXmlHandle/GetHotelDetail/" + sp.HotelIds
        );
      },
      GetQueryString: function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      },
      roomNumchange(n) {
        console.log(n);
        if (this.nameList.length < n) {
          this.nameList.push({ name: '李' + n });
        }
        if (this.nameList.length > n) {
          this.nameList.splice(-1, 1);

        }
        if (n === 10) {
          this.noticeshow = true;
        } else {
          this.noticeshow = false;
        }

      }
    }
  })

</script>

</html>